import { defineComponent } from 'vue'
import { computed } from 'vue'

export default defineComponent({
	props: {
		task: {
			required: true,
			type: Object
		}
	},
	setup(props) {
		const lastValue = computed(() => props.task.last && props.task.last.value)
		// const lastError = computed(() => props.task.last && props.task.last.error)

		return () => (
			<div>
				<slot name="loading" v-if="task.isRunning">
					Loading... (put your favourite spinner here)
				</slot>

				<slot name="error" v-else-if="task.isError" error="lastError">
					<div>
						<p>{'Something went wrong'}</p>
						<button onClick={props.task.perform}>Try again</button>
					</div>
				</slot>
				<slot v-else-if="task.performCount > 0" value={lastValue} />
			</div>
		)
	}
})
